<%--
  Created by IntelliJ IDEA.
  User: Ray
  Date: 2019/9/13
  Time: 13:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机详情</title>
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${path}/css/details.css">
</head>

<body>
<!--响应式导航-->
<%@include file="../common/header.jsp"%>
<div class="container">

    <div class="media">
        <div class="media-left">
            <div id="mouse"></div>
            <div id="d1" style="background-image: url(${phone.url});"></div>
            <div id="d2">
                <!-- <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3779661,3718908861&fm=26&gp=0.jpg " alt="" id="Img"> -->
            </div>
        </div>
        <div class="media-body">
            <%--<c:forEach items="phoneTypeList" var="pt">--%>
                <%--<c:if test="${phone.id==pt.id}">--%>
                    <h1 class="pro_name">${phone.name}  ${phone.intro} </h1>
                <%--</c:if>--%>
            <%--</c:forEach>--%>
            <div class="product-info">
                <div class="price">
                    <span>价&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                    <span class="pro_price">
                                <em>¥</em>${phone.price}
                            </span>
                </div>
                <div class="pro_info_cuxiao">
                    <span>促&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                    <div class="pro_item">
                        <em class="tag">赠送积分</em>
                        <div class="product_prom">
                            购买即赠商城积分，积分可抵现~
                        </div>
                    </div>
                </div>
            </div>
            <div class="hr-1"></div>
            <!-- 颜色 -->
            <div class="choose">
                <div class="choose_color">
                    <span>选择颜色</span>
                    <div class="color">
                        <ul>
                            <li>${phoneDetails.color}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 版本 -->
            <div class="choose_gra">
                <div class="choose_color">
                    <span>选择版本</span>
                    <div class="color">
                        <ul>
                            <li>${phoneDetails.size1}</li>
                            <li>${phoneDetails.size2}</li>
                            <li>${phoneDetails.size3}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 选择套餐 -->
            <div class="choose_gra">
                <div class="choose_color">
                    <span>选择套餐</span>
                    <div class="color">
                        <ul>
                            <li>官方标配</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 分期免息 -->
            <div class="choose_gra">
                <div class="choose_color">
                    <span>分期免息</span>
                    <div class="color">
                        <ul>
                            <li>¥408.85起×3期</li>
                            <li>¥208.82起×6期</li>
                            <li>¥107.40起×12期</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 购买 -->
            <div class="pro_option">
                <div class="stock">
                    <input type="text" class="pro_quantity" placeholder="1" value="1">
                    <p class="pro_stock_btn">
                        <a href="#" id="pro_quantity_plus">+</a>
                        <a href="#" id="pro_quantity_minus">-</a>
                    </p>
                </div>
                <div class="pro_buttonmian">
                    <a href="#" class="product-button01">
                        <span>加入购物车</span>
                    </a>
                    <a href="#" class="product-button02">
                        <span>立即购买</span>
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>
<%--<script src="${path}/js/details.js"></script>--%>
</body>

</html>
